<!-- 组合式 -->
<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		watch
	} from 'vue';

	import {
		ElMessage
	} from 'element-plus'

	// pinia
	import {
		// useUserStore,
		useConfigStore,
	} from "@/stores";
	import router from "@/router";
	import api from '@/api/api';
	import util from '@/utils/util';
	// import config from '@/utils/config';

	// 组件
	import uploadFileVue from './upload-file.vue';
	import uploadImageVue from './upload-image.vue';

	// 参数接收
	const props = defineProps({
		msg: {
			type: String,
			default: 'msg',
		},
	})
	// const token = localStorage.getItem('token');

	// 参数
	const pages = reactive({

		schoolDept: [],
		xyDept: [],
		skill_type: useConfigStore().config.skill_type || [],
		bm_type: useConfigStore().config.bm_type || [],

		zj: [],

		formData: {
			schoolDeptId: '', // "学校Id"

			linkPerson: '', // "联系人"
			linkPhone: '', // "联系电话"

			name: '', // "大赛名称"
			type: '', // "赛事类别" skill_type
			bmType: '', // 报名类型 bm_type
			image: [], // 数组

			xyDeptId: '', // "参赛对象类型(选择的院系)"
			projectInfo: '', // 项目介绍
			jfRule: '', // 
			bmTj: '', // 
			skillArrange: '', // 赛程安排
			zjId: '', // 专家
			address: '', // 地址

			bmStartDate: '', // 报名开始时间
			bmEndDate: '', // 报名截止时间
			bsDate: '', // 比赛开始时间
			bsEndDate: '', // 比赛结束时间
			scoreDate: '', // 成绩公布时间

			// typeName: '', // "分类名称"

			fjList: [],
		},

		rules: {
			// schoolDeptId: [{
			// 	required: true,
			// 	message: '请选择学校名称',
			// 	trigger: 'blur'
			// }],
			linkPerson: [{
				required: true,
				message: '请输入联系人',
				trigger: 'blur'
			}],
			linkPhone: [{
				required: true,
				message: '请输入联系电话',
				trigger: 'blur'
			}],
			name: [{
				required: true,
				message: '请输入赛事项目名称',
				trigger: 'blur'
			}],
			type: [{
				required: true,
				message: '请选择赛事类别',
				trigger: 'blur'
			}],
			bmType: [{
				required: true,
				message: '请选择报名类别',
				trigger: 'blur'
			}],
			image: [{
				required: true,
				message: '请上传赛事封面',
				trigger: 'blur'
			}],
			xyDeptId: [{
				required: true,
				message: '请选择参赛对象',
				trigger: 'blur'
			}],

			projectInfo: [{
				required: true,
				message: '请输入赛事项目介绍',
				trigger: 'blur'
			}],
			jfRule: [{
				required: true,
				message: '请输入积分规则',
				trigger: 'blur'
			}],
			bmTj: [{
				required: true,
				message: '请输入报名条件',
				trigger: 'blur'
			}],
			skillArrange: [{
				required: true,
				message: '请输入赛程安排',
				trigger: 'blur'
			}],

			zjId: [{
				required: true,
				message: '请选择专家',
				trigger: 'blur'
			}],
			address: [{
				required: true,
				message: '请输入比赛地点',
				trigger: 'blur'
			}],

			bmStartDate: [{
				required: true,
				message: '请选择报名开始时间',
				trigger: 'blur'
			}],
			bmEndDate: [{
				required: true,
				message: '请选择报名截止时间',
				trigger: 'blur'
			}],
			bsDate: [{
				required: true,
				message: '请选择比赛开始时间',
				trigger: 'blur'
			}],
			bsEndDate: [{
				required: true,
				message: '请选择比赛结束时间',
				trigger: 'blur'
			}],
			scoreDate: [{
				required: true,
				message: '请选择成绩公布时间',
				trigger: 'blur'
			}],
		},
	})
	const formRef = ref();

	// 学校发生变化
	watch(() => pages.formData.schoolDeptId, async (parentId) => {

		// 清空系
		if (!parentId) {
			pages.xyDept = [];
			pages.formData.xyDeptId = '';
			return
		};

		// 获取系
		pages.xyDept = await api.user.getDeptlist({
			deptName: "", // 部门名称
			parentId, // 父级Id
		})
	})

	// 挂载
	onMounted(() => {
		init(); // 初始化
	})

	// 初始化
	async function init() {
		util.showLoading();

		// 学校
		pages.schoolDept = await api.user.getDeptlist({
			deptName: "", // 部门名称
			parentId: "", // 父级Id
			deptId: 100, // 100 是学校
		})
		pages.formData.schoolDeptId = pages.schoolDept[0].deptId;


		// 查询人员通过角色（查专家）
		pages.zj = await api.user.getUserlistByRole('system:zj');

		util.hideLoading();
	}

	// 提交
	function changeSave() {

		// 拦截验证
		formRef.value.validate(async valid => {
			if (!valid) return;

			let data = JSON.parse(JSON.stringify(pages.formData));

			data.image = data.image[0].response.fileName;

			// 遍历附件
			const old_fjList = data.fjList;
			if (old_fjList.length) {
				let new_fjList = [];
				old_fjList.forEach(item => {
					new_fjList.push({
						name: item.response.newFileName,
						url: item.response.fileName,
					})
				})
				data.fjList = new_fjList;
			}
			// console.log(data);
			// return;

			const res = await api.user.skillApply(data);
			if (!res) return;

			util.alert('提交申请成功！');

			router.go(-1);
			// emit('changeSave', pages.formData)
		})
	}

	// 暴露
	defineExpose({})

	// 回调
	const emit = defineEmits(['changeSave'])
</script>


<template>
	<div class="index-but1-form">

		<!-- el-form -->
		<el-form ref="formRef" :model="pages.formData" :rules="pages.rules" style="width: 100%;margin-top: 30px;"
			label-position="right" label-width="125px">

			<!-- 学校名称： -->
			<!-- <el-form-item label="学校名称：" prop="schoolDeptId">
				<el-select v-model="pages.formData.schoolDeptId" placeholder="请选择学校名称" clearable size="large"
					:style="{width: '100%'}">
					<el-option v-for="item in pages.schoolDept" :key="item.deptId" :label="item.deptName"
						:value="item.deptId" />
				</el-select>
			</el-form-item> -->

			<!-- 联系人： -->
			<el-form-item label="联系人：" prop="linkPerson">
				<el-input type="text" v-model="pages.formData.linkPerson" placeholder="请输入联系人" clearable size="large"
					:style="{width: '100%'}" />
			</el-form-item>

			<!-- 联系电话： -->
			<el-form-item label="联系电话：" prop="linkPhone">
				<el-input type="text" maxlength="11" v-model="pages.formData.linkPhone" placeholder="请输入联系电话" clearable
					size="large" :style="{width: '100%'}" />
			</el-form-item>

			<!-- 赛事项目名称： -->
			<el-form-item label="赛事项目名称：" prop="name">
				<el-input type="text" v-model="pages.formData.name" placeholder="请输入赛事项目名称" clearable size="large"
					:style="{width: '100%'}" />
			</el-form-item>

			<!-- 赛事类别： -->
			<el-form-item label="赛事类别：" prop="type">
				<el-select v-model="pages.formData.type" placeholder="请选择赛事类别" clearable size="large"
					:style="{width: '100%'}">
					<el-option v-for="item in pages.skill_type" :key="item.dictValue" :label="item.dictLabel"
						:value="item.dictValue" />
				</el-select>
			</el-form-item>

			<!-- 报名类别： -->
			<el-form-item label="报名类别：" prop="bmType">
				<el-select v-model="pages.formData.bmType" placeholder="请选择报名类别" clearable size="large"
					:style="{width: '100%'}">
					<el-option v-for="item in pages.bm_type" :key="item.dictValue" :label="item.dictLabel"
						:value="item.dictValue" />
				</el-select>
			</el-form-item>

			<!-- 赛事封面 -->
			<el-form-item label="赛事封面：" prop="image">
				<upload-image-vue v-model="pages.formData.image" />
			</el-form-item>

			<!-- 参赛对象： -->
			<el-form-item label="参赛对象：" prop="xyDeptId">
				<el-select v-model="pages.formData.xyDeptId" placeholder="请选择参赛对象" clearable size="large"
					:style="{width: '100%'}">
					<el-option v-for="item in pages.xyDept" :key="item.deptId" :label="item.deptName"
						:value="item.deptId" />
				</el-select>
			</el-form-item>

			<!-- 赛事项目介绍 -->
			<el-form-item label="赛事项目介绍：" prop="projectInfo">
				<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" resize="none"
					v-model="pages.formData.projectInfo" placeholder="请输入赛事项目介绍" size="large" style="width: 100%;" />
			</el-form-item>

			<!-- 积分规则 -->
			<el-form-item label="积分规则：" prop="jfRule">
				<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" resize="none"
					v-model="pages.formData.jfRule" placeholder="请输入积分规则" size="large" style="width: 100%;" />
			</el-form-item>

			<!-- 报名条件 -->
			<el-form-item label="报名条件：" prop="bmTj">
				<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" resize="none"
					v-model="pages.formData.bmTj" placeholder="请输入报名条件" size="large" style="width: 100%;" />
			</el-form-item>

			<!-- 赛程安排 -->
			<el-form-item label="赛程安排：" prop="skillArrange">
				<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" resize="none"
					v-model="pages.formData.skillArrange" placeholder="请输入赛程安排" size="large" style="width: 100%;" />
			</el-form-item>

			<!-- 专家： -->
			<el-form-item label="专家：" prop="zjId">
				<el-select v-model="pages.formData.zjId" placeholder="请选择专家" clearable size="large"
					:style="{width: '100%'}">
					<el-option v-for="item in pages.zj" :key="item.userId" :label="item.nickName"
						:value="item.userId" />
				</el-select>
			</el-form-item>

			<!-- 比赛地点： -->
			<el-form-item label="比赛地点：" prop="address">
				<el-input type="text" v-model="pages.formData.address" placeholder="请输入比赛地点" clearable size="large"
					:style="{width: '100%'}" />
			</el-form-item>


			<!-- 报名开始时间： -->
			<el-form-item label="报名开始时间：" prop="bmStartDate">
				<el-date-picker v-model="pages.formData.bmStartDate" type="date" placeholder="请选择报名开始时间" clearable
					size="large" :style="{width: '100%'}" />
			</el-form-item>

			<!-- 报名截止时间： -->
			<el-form-item label="报名截止时间：" prop="bmEndDate">
				<el-date-picker v-model="pages.formData.bmEndDate" type="date" placeholder="请选择报名截止时间" clearable
					size="large" :style="{width: '100%'}" />
			</el-form-item>

			<!-- 比赛开始时间： -->
			<el-form-item label="比赛开始时间：" prop="bsDate">
				<el-date-picker v-model="pages.formData.bsDate" type="date" placeholder="请选择比赛开始时间" clearable
					size="large" :style="{width: '100%'}" />
			</el-form-item>

			<!-- 比赛结束时间： -->
			<el-form-item label="比赛结束时间：" prop="bsEndDate">
				<el-date-picker v-model="pages.formData.bsEndDate" type="date" placeholder="请选择比赛结束时间" clearable
					size="large" :style="{width: '100%'}" />
			</el-form-item>

			<!-- 成绩公布时间： -->
			<el-form-item label="成绩公布时间：" prop="scoreDate">
				<el-date-picker v-model="pages.formData.scoreDate" type="date" placeholder="请选择成绩公布时间" clearable
					size="large" :style="{width: '100%'}" />
			</el-form-item>

			<!-- 上传附件 -->
			<el-form-item label="上传附件：" prop="fjList">
				<upload-file-vue v-model="pages.formData.fjList" />
			</el-form-item>

		</el-form>

		<!-- 提交申请 -->
		<l-button value="提交申请" @change="changeSave" />

	</div>
</template>


<style lang="scss">
	.index-but1-form {

		.el-form {
			display: grid;
			gap: 20px;
		}

		.el-form-item__label {
			font-size: 14px;
			line-height: 40px;
			color: #333333;
		}

		.el-input__wrapper,
		.el-select__wrapper,
		.el-textarea__inner {
			background-color: #F5F8FD !important;
		}
	}
</style>
<style lang="scss" scoped>
	.index-but1-form {
		margin-top: 40px;
		display: flex;
		flex-direction: column;

		.title {
			font-weight: bold;
			font-size: 28px;
			color: #333333;
		}

		.biao {
			margin-top: 10px;
			width: 60px;
			height: 4px;
			background: #5775EF;
			border-radius: 6px 6px 6px 6px;
		}

		.l-button {
			margin: 0 auto;
			margin-top: 40px;
			width: 360px;
			line-height: 48px;
			font-size: 16px;
		}
	}
</style>